<template>
	<view class="settings-container" :class="{ 'dark-mode': darkMode }">
		<!-- 主体内容 -->
		<scroll-view class="content" scroll-y :class="{ 'dark-scroll': darkMode }">
			<!-- 账号与安全 -->
			<view class="section-card">
				<view class="section-title">账号与安全</view>
				<view class="item" @click="handleChangePassword">
					<text>修改密码</text>
					<uni-icons type="right" size="16px" color="#999"></uni-icons>
				</view>
				<view class="item" @click="handleChangePhone">
					<text>更换手机号</text>
					<text class="phone">138****8888</text>
					<uni-icons type="right" size="16px" color="#999"></uni-icons>
				</view>
				<view class="item" @click="handleThirdParty">
					<text>第三方账号</text>
					<view class="third-party-icons">
						<uni-icons type="weixin" size="20px" color="#09BB07"></uni-icons>
						<uni-icons type="qq" size="20px" color="#12B7F5" style="margin-left: 16rpx;"></uni-icons>
					</view>
					<uni-icons type="right" size="16px" color="#999"></uni-icons>
				</view>
			</view>

			<!-- 通知设置 -->
			<view class="section-card">
				<view class="section-title">通知设置</view>
				<view class="item">
					<text>农事提醒</text>
					<switch :checked="reminderEnabled" @change="handleReminderChange" color="#4CD964"></switch>
				</view>
				<view class="item">
					<text>系统消息</text>
					<switch :checked="systemMsgEnabled" @change="handleSystemMsgChange" color="#4CD964"></switch>
				</view>
			</view>

			<!-- 通用设置 -->
			<view class="section-card">
				<view class="section-title">通用设置</view>
				<view class="item" @click="handleUnitSetting('area')">
					<text>面积单位</text>
					<text class="value">{{ areaUnit }}</text>
					<uni-icons type="right" size="16px" color="#999"></uni-icons>
				</view>
				<view class="item" @click="handleUnitSetting('weight')">
					<text>重量单位</text>
					<text class="value">{{ weightUnit }}</text>
					<uni-icons type="right" size="16px" color="#999"></uni-icons>
				</view>
				<view class="item">
					<text>夜间模式</text>
					<switch :checked="darkMode" @change="handleThemeChange" color="#4CD964"></switch>
				</view>
			</view>

			<!-- 系统维护 -->
			<view class="section-card">
				<view class="section-title">系统维护</view>
				<view class="item" @click="handleClearCache">
					<text>清理缓存</text>
					<text class="value">{{ cacheSize }}</text>
					<uni-icons type="right" size="16px" color="#999"></uni-icons>
				</view>
				<view class="item" @click="handleCheckUpdate">
					<text>检查更新</text>
					<text class="value">{{ appVersion }}</text>
					<uni-icons type="right" size="16px" color="#999"></uni-icons>
				</view>
			</view>

			<!-- 底部选项 -->
			<view class="footer">
				<text class="footer-item" @click="handleUserAgreement">用户协议</text>
				<text class="footer-item" @click="handlePrivacyPolicy">隐私政策</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	// 日夜模式状态
	const darkMode = ref(false);

	// 模拟缓存数据
	const cacheData = ref([{
			id: 1,
			name: '图片缓存',
			size: 5.2
		},
		{
			id: 2,
			name: '日志文件',
			size: 3.8
		},
		{
			id: 3,
			name: '临时数据',
			size: 3.5
		}
	]);

	// 其他状态
	const reminderEnabled = ref(true);
	const systemMsgEnabled = ref(true);
	const phone = ref('138****8888');
	const cacheSize = ref('12.5MB');
	const appVersion = ref('v1.0.0');
	const areaUnit = ref('亩');
	const weightUnit = ref('公斤');

	// 初始化
	onMounted(() => {
		// 从本地存储读取日夜模式设置
		const savedMode = uni.getStorageSync('darkMode');
		if (savedMode !== '') {
			darkMode.value = savedMode;
		}

		// 计算初始缓存大小
		calculateCacheSize();

		// 获取用户信息
		const info = uni.getStorageSync('userInfo');
		if (info?.phone) {
			phone.value = info.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
		}
	});

	// 计算缓存大小
	const calculateCacheSize = () => {
		const totalSize = cacheData.value.reduce((sum, item) => sum + item.size, 0);
		cacheSize.value = totalSize.toFixed(1) + 'MB';
	};

	// 主题切换
	const handleThemeChange = (e) => {
		darkMode.value = e.detail.value;
		uni.setStorageSync('darkMode', darkMode.value);
		applyTheme();
	};

	// 应用主题
	const applyTheme = () => {
		if (darkMode.value) {
			console.log('夜间模式已启用');
		} else {
			console.log('日间模式已启用');
		}
	};

	// 清理缓存（模拟功能）
	const handleClearCache = () => {
		uni.showModal({
			title: '提示',
			content: `确定要清理 ${cacheSize.value} 缓存吗？`,
			success: (res) => {
				if (res.confirm) {
					uni.showLoading({
						title: '清理中...'
					});

					// 模拟清理过程
					setTimeout(() => {
						cacheSize.value = '0MB';
						uni.hideLoading();
						uni.showToast({
							title: '清理完成',
							icon: 'success'
						});

						// 3秒后恢复缓存数据（模拟新缓存生成）
						setTimeout(() => {
							calculateCacheSize();
						}, 3000);
					}, 1500);
				}
			}
		});
	};

	// 返回按钮
	const handleBack = () => {
		uni.navigateBack();
	};

	// 修改密码功能
	const handleChangePassword = () => {
		uni.navigateTo({
			url: '/pages/settings/password',
			success: () => {
				const info = uni.getStorageSync('userInfo');
				uni.$emit('password-change-init', {
					phone: info?.phone || ''
				});
			}
		});
	};

	// 更换手机号功能
	const handleChangePhone = () => {
		uni.navigateTo({
			url: '/pages/settings/change-phone',
			events: {
				acceptNewPhone: (newPhone) => {
					const info = uni.getStorageSync('userInfo');
					info.phone = newPhone;
					uni.setStorageSync('userInfo', info);
					phone.value = newPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
				}
			},
			success: () => {
				const info = uni.getStorageSync('userInfo');
				uni.$emit('phone-change-init', {
					oldPhone: info?.phone || ''
				});
			}
		});
	};

	// 第三方账号绑定
	const handleThirdParty = () => {
		uni.navigateTo({
			url: '/pages/settings/third-party'
		});
	};

	// 农事提醒开关
	const handleReminderChange = (e) => {
		reminderEnabled.value = e.detail.value;
		uni.showToast({
			title: '设置已保存',
			icon: 'success'
		});
	};

	// 系统消息开关
	const handleSystemMsgChange = (e) => {
		systemMsgEnabled.value = e.detail.value;
		uni.showToast({
			title: '设置已保存',
			icon: 'success'
		});
	};

	// 单位设置
	const handleUnitSetting = (type) => {
		const items = type === 'area' ? ['亩', '公顷'] : ['公斤', '斤'];
		const currentValue = type === 'area' ? areaUnit.value : weightUnit.value;

		uni.showActionSheet({
			itemList: items,
			success: (res) => {
				const selected = items[res.tapIndex];
				if (type === 'area') {
					areaUnit.value = selected;
				} else {
					weightUnit.value = selected;
				}
				uni.showToast({
					title: '单位设置已保存',
					icon: 'success'
				});
			}
		});
	};

	// 检查更新
	const handleCheckUpdate = () => {
		uni.showLoading({
			title: '检查中...'
		});

		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({
				title: '已是最新版本',
				icon: 'none'
			});
		}, 1000);
	};

	// 用户协议
	const handleUserAgreement = () => {
		uni.navigateTo({
			url: '/pages/webview?url=' + encodeURIComponent('https://example.com/user-agreement&title=用户协议')
		});
	};

	// 隐私政策
	const handlePrivacyPolicy = () => {
		uni.navigateTo({
			url: '/pages/webview?url=' + encodeURIComponent('https://example.com/privacy-policy&title=隐私政策')
		});
	};
</script>

<style>
	page {
		height: 100%;
	}

	.settings-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 32rpx;
		background-color: #fff;
		position: relative;
	}

	.nav-left {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 18px;
		font-weight: 500;
	}

	.content {
		flex: 1;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
	}

	.section-card {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		padding: 0 32rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 16px;
		color: #999;
		padding: 24rpx 0 16rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		font-size: 16px;
		color: #333;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.item:last-child {
		border-bottom: none;
	}

	.phone {
		flex: 1;
		text-align: right;
		color: #999;
		font-size: 14px;
		padding-right: 16rpx;
	}

	.value {
		color: #999;
		font-size: 14px;
		padding-right: 8rpx;
	}

	.third-party-icons {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: flex-end;
		padding-right: 16rpx;
	}

	.footer {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;
	}

	.footer-item {
		font-size: 14px;
		color: #999;
		padding: 0 32rpx;
	}

	.footer-item:first-child {
		border-right: 1rpx solid #e0e0e0;
	}

	/* 日夜模式样式 */
	.dark-mode {
		background-color: #121212 !important;
		color: #e0e0e0 !important;
	}

	.dark-mode .nav-bar {
		background-color: #1e1e1e !important;
	}

	.dark-mode .section-card {
		background-color: #1e1e1e !important;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3) !important;
	}

	.dark-mode .section-title {
		color: #9e9e9e !important;
		border-bottom-color: #333 !important;
	}

	.dark-mode .item {
		color: #e0e0e0 !important;
		border-bottom-color: #333 !important;
	}

	.dark-mode .phone,
	.dark-mode .value {
		color: #9e9e9e !important;
	}

	.dark-mode .footer-item {
		color: #9e9e9e !important;
	}

	.dark-mode .footer-item:first-child {
		border-right-color: #333 !important;
	}

	.dark-scroll {
		background-color: #121212 !important;
	}
</style>